<template>
  <div @click="itemClick">
    <div class="content_left_article" infinite-scroll-delay="2000" v-infinite-scroll="load" v-for="(item, i) in dataList"
      :key="i" :infinite-scroll-disabled="disabled">
      <div class="content_left_article_meta">
        {{ item.username }}<div>|</div>{{ item.last_edit_day }}天前
      </div>
      <div
        style="display:flex; justify-content: space-between; padding-bottom:12px; border-bottom:1px solid hsla(0,0%,59.2%,.1);">
        <div class="content_left_article_box">
          <div class="content_left_article_box_title"><a>{{ item.title }}</a></div>
          <div class="content_left_article_box_overview"><a>{{ item.content }}</a></div>
          <div class="content_left_article_box_icon">
            <i class="el-icon-aim">{{ item.click }}</i>
            <i class="el-icon-thumb">{{ item.like }}</i>
            <i class="el-icon-chat-dot-round">{{ item.comment }}</i>
          </div>
        </div>
        <div><img class="content_left_article_img"
            src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9b40a55342e4dacbd6530b56ee4bb40~tplv-k3u1fbpfcp-no-mark:720:720:720:480.awebp?"
            alt=""></div>
      </div>
    </div>
    <p v-if="loading">Loading...</p>
    <p v-if="disabled">没有更多了</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios'
export default {
  name: 'Recommended',
  setup() {
    let dataList = ref([]);
    let loading = ref(false);
    axios.get("http://101.35.142.191:8081/json/juejing.json").then(res => {
      console.log(res.data);
      dataList.value = res.data
    })

    let disabled = ref(false)
    const load = () => {
      loading.value = true;
      setTimeout(() => {
        axios.get("http://101.35.142.191:8081/json/juejing.json").then(res => {
          dataList.value.push(...res.data)
          if (dataList.value.length > 30) {
            disabled.value = true;
          }
          loading.value = false;
        })
      }, 2000)


    }
    return {
      load, dataList, disabled, loading
    }
  },
  methods: {
    itemClick() {
      this.$router.push('/post')
    }
    
  }
}
</script>

<style scoped lang="scss">
.content_left_article {
  overflow: auto;
  height: 133px;
  width: 100%;
  padding: 12px 20px 0 20px;

  &:hover {
    background-color: #f2f3f5;
    cursor: pointer;
  }

  &_meta {
    width: 100%;
    height: 22px;
    display: flex;
    line-height: 22px;
    font-size: 13px;

    div {
      margin: 0 15px;
    }
  }

  &_box {
    width: 516px;
    height: 80px;

    &_title {
      width: 516px;
      height: 24px;
      margin: 8px 0;

      a {
        color: #1d2129;
        font-weight: bolder;
      }
    }

    &_overview {
      font-size: 13px;
    }

    &_icon {
      display: flex;
      margin-top: 7px;

      i {
        margin-right: 10px;

        &:hover {
          color: blue;
        }
      }
    }
  }

  &_img {
    width: 120px;
    height: 80px;
  }
}
</style>
